<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>海数云</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/normalize.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="/static/plugs/bootstrap/jquery.slim.min.js"></script>
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/initial.js"></script>
    <style>
        .wrap{
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .search-header{
            width: 1440px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /*border: 1px red solid;*/
            .search-title-wrap{
                display: flex;
                justify-content: center;
                align-items: center;
                .search-title-icon{
                    width: 48px;
                    height: 48px;
                    background: url("/static/images/logo.png") 100% 100%;
                    background-size: contain;
                    margin-right: 20px;
                }
                .search-title a{
                    color:darkmagenta;
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .search-input-wrap{
                width: 650px;
                height: 80px;
                display: flex;
                align-items: center;
                /*background: grey;*/
            }
            .search-input-wrap input{
                width: 650px;
                height: 60px;
                padding-left: 30px;
                border-radius: 40px;
                border:0.1pt solid rgba(220, 220, 220, 0.8);
            }
            .user-wrap{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .msg-wrap{
                    margin-right: 20px;
                    display: flex;
                    flex-direction: row;
                }
                .msg-icon{
                    width: 24px;
                    height: 24px;
                    margin-right: 5px;
                    background: url("/static/images/bell2.png") 100% 100%;
                    background-size: contain;
                }
                .user-img img{
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                }
                .search-action{
                    /*border: 1px red solid;*/
                    width: 100px;
                    height: 40px;
                    margin-left: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 20px;
                    padding: 2px 10px;
                    background: #bfcdda;
                    color:#ffffff;
                    font-size: 18px;
                    font-weight: 400;
                }
            }
        }

        /*导航条布局*/
        .nav{
            width: 1440px;
            margin-top: 20px;
            height: 60px;
            font-size: 24px;
            border-radius: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            /*background: #333333;*/
        }

        .user-info-wrap{
            position: relative;
            width: 1440px;
            margin-top: 20px;
            height: 350px;
            /*border: 1px solid red;*/
            display: flex;
            background: #bfcdda;
            flex-direction: column;
            align-items: center;
            .user-big-icon{
                width: 140px;
                height: 140px;
                border-radius: 50%;
                margin-top: 20px;
                background: url("/static/images/thumb.png") 100% 100%;
                background-size: contain;
            }
            .user-name{
                margin-top: 10px;
            }
            .user-brief-des{
                margin-top: 10px;
            }
            .recommend-btn{
                position: absolute;
                width: 100px;
                height: 40px;
                border-radius: 5px;
                top: 10px;
                right:20px;
                line-height: 40px;
                text-align: center;
                background: #FFFFFF;
            }
        }
        .user-count-wrap{
            width: 800px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            /*border: 1px solid red;*/
            .user-count-item{
                width: 100px;
                font-size: 22px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
        }

        .grid-switch-title{
            width: 300px;
            height: 50px;
            margin:30px 0;
            display: flex;
            justify-content: space-around;
            font-size: 24px;
            /*border: 1px solid red;*/
        }
        .grid-switch-title .chapter{
           border-bottom:  5px #bfcdda solid;
        }

        .contain{
            margin:50px 0 50px 50px;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /*padding-bottom: 100px;*/
        }
        .scroll{
            height: 700px;
            display:flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            overflow: scroll;
            overflow-x: hidden;
            overflow-y：scorll;
        }
        .scroll::-webkit-scrollbar {
            display: none;
        }

        .data{
            width: 340px;
            height: 340px;
            margin-right: 10px;
            margin-bottom: 10px;
            background: grey;
        }
        .data-1x{
            width: 340px;
            height: 340px;
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
            background: none;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }
        .data-1x img{
            width: 340px;
            height: 340px;
            position: absolute;
            z-index: -1;
            object-fit: cover;
        }
        .data-1x-wrap {
            /*border: 1px red solid;*/
            width: 340px;
            height: 170px;
            /*margin-top: 170px;*/
            /*position: absolute;*/
            background: linear-gradient(to top, rgba(255, 255, 255,1), rgba(255, 255, 255,0));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 0 20px 20px 20px;
            .data1x-user-box{
                width: 300px;
                height: 60px;
                display: flex;
                flex-direction: row;
                align-items: center;
                .data1x-user-icon{
                    width: 48px;
                    height: 48px;
                    margin-right: 20px;
                }
                .data1x-user-icon img{
                    width: 48px;
                    height: 48px;
                    z-index: 5;
                    border-radius: 50%;
                }
            }
            .data1x-title{
                width: 300px;
                height: 80px;
                line-height: 40px;
                font-size: 23px;
                /*border: 1px yellow solid;*/
            }
            .data1x-op-box{
                width: 300px;
                height: 50px;
                display: flex;
                flex-direction: row;
                align-items: center;
                /*background: #FFFFFF;*/
                .icon-up{
                    width: 24px;
                    height: 24px;
                    background: url("/static/images/up.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-up-num{
                    margin-right: 10px;
                }
                .icon-comment{
                    width: 24px;
                    height: 24px;
                    background: url("/static/images/comment.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-comment-num{
                    margin-right: 10px;
                }
                .icon-store{
                    width: 24px;
                    height: 24px;
                    background: url("/static/images/store.png") 100% 100%;
                    background-size: contain;
                    margin-right: 5px;
                }
                .icon-store-num{
                    margin-right: 10px;
                }
            }
        }

        .op-box{
            position: absolute;
            top:0;
            width: 340px;
            height: 60px;
            border: 1px solid darkgray;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            background: #FFFFFF;
            .edit, .delete{
                display: flex;
                flex-direction: row;
            }
        }
        .edit div:first-child{
            width: 24px;
            height: 24px;
            margin-right: 10px;
            background: url("/static/images/edit.png") 100% 100%;
            background-size: contain;
        }
        .delete div:first-child{
            width: 24px;
            height: 24px;
            margin-right: 10px;
            background: url("/static/images/delete.png") 100% 100%;
            background-size: contain;
        }


        /*footer布局*/
        .footer-wrap{
            display: flex;
            justify-content: center;
            background: #cccccc;
        }
        .footer{
            width: 1440px;
            height: 60px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            .outer-link{
                display: flex;
                justify-content: space-around;
            }
        }
        .outer-link div a{
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="search-header">
        <div class="search-title-wrap">
            <div class="search-title-icon"></div>
            <div class="search-title"><a href="/index.php">haishuyun</a></div>
        </div>
        <div class="search-input-wrap">
            <input class="search-input" placeholder="请输入查询内容...">
            <div class="search-icon"></div>
        </div>
        <div class="user-wrap">
            <div class="msg-wrap">
                <div class="msg-icon"></div>
                <div class="msg">消息</div>
            </div>
            <div class="user-img">
                <img src="/static/images/thumb.png" alt="暂无头像" onclick="toUser()">
            </div>
            <div class="search-action">
                <div><a href="javascript:void(0)" onclick="toWorks()">创作</a></div>
            </div>
        </div>
    </div>
    <div class="nav">
        <div><a href="">关注</a></div>
        <div><a href="">头条</a></div>
        <div><a href="">知识</a></div>
        <div><a href="">政策法规</a></div>
        <div class="nav-product"><a href="/product.php">产品服务</a></div>
        <div><a href="">招聘</a></div>
        <div><a href="">人物</a></div>
        <div><a href="">分享</a></div>
        <div><a href="">企业</a></div>
    </div>
    <div class="user-info-wrap">
        <div class="recommend-btn"><a href="javascript:volid(0)" onclick="changeFace()">修改封面</a></div>
        <div class="user-big-icon"></div>
        <div class="user-name">haishuyun</div>
        <div class="user-brief-des">这个人很懒，什么都没留下~</div>
        <div class="user-count-wrap">
            <div class="articles user-count-item">
                <div class="-num">12</div>
                <div>文章</div>
            </div>
            <div class="fun user-count-item">
                <div class="-num">5002</div>
                <div><a href="funs.php">粉丝</a></div>
            </div>
            <div class="follows user-count-item">
                <div class="-num">18000</div>
                <div><a href="follow.php">关注</a></div>
            </div>
            <div class="thumbs user-count-item">
                <div class="-num">852</div>
                <div>点赞</div>
            </div>
            <div class="comments user-count-item">
                <div class="-num">620</div>
                <div><a href="comments.php">评论</a></div>
            </div>
            <div class="stores user-count-item">
                <div class="-num">98</div>
                <div>收藏</div>
            </div>
            <div class="forwards user-count-item">
                <div class="-num">165</div>
                <div>转发</div>
            </div>
        </div>
    </div>
    <div class="grid-switch-title">
        <div class="chapter" onclick="getLists('chapter')">文章</div>
        <div class="comments" onclick="getLists('comments')">评论</div>
        <div class="stores" onclick="getLists('stores')">收藏</div>
    </div>

    <div class="contain">
        <div class="scroll">
            <div class="data data-1x" onmouseenter="showOpBox()" onmouseleave="deleteOpBox()">
                <img src="" alt="">
                <div class="data-1x-wrap">
                    <div class="data1x-user-box">
                        <div class="data1x-user-icon">
                            <img src="/static/images/thumb.png" alt="">
                        </div>
                        <div class="data1x-user-name">时事早知道</div>
                    </div>
                    <div class="data1x-title">马家厨房要做预制菜？马云前助理回应</div>
                    <div class="data1x-op-box">
                        <div class="icon-up"></div>
                        <div class="icon-up-num">200</div>
                        <div class="icon-comment"></div>
                        <div class="icon-comment-num">200</div>
                        <div class="icon-store"></div>
                        <div class="icon-store-num">200</div>
                    </div>
                </div>
            </div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
            <div class="data">data</div>
        </div>
    </div>
</div>
<div class="footer-wrap">
    <div class="footer">
        <div class="copyright">Copyright © 2023 海数云 版权所有 渝ICP备2022012388号</div>
        <div class="outer-link">
            <div><a href="">用户协议</a></div>
            <div><a href="">隐私政策</a></div>
            <div><a href="">媒体合作</a></div>
            <div><a href="">广告合作</a></div>
            <div><a href="">友情链接</a></div>
            <div><a href="">反馈建议</a></div>
        </div>
    </div>
</div>
</body>
<script>

    $(document).ready(function(){
        $(".data-1x > img").attr('src', '/static/images/data-1x.jpg');
    })

    function getLists(type){
        if ( type === 'chapter'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .chapter").css("border-bottom", "5px #bfcdda solid");
        }
        if ( type === 'comments'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .comments").css("border-bottom", "5px #bfcdda solid");
            window.location.href="comments.php";
        }
        if ( type === 'stores'){
            $(".grid-switch-title div").css("border-bottom", "none");
            $(".grid-switch-title .stores").css("border-bottom", "5px #bfcdda solid");
            window.location.href="stores.php";
        }
    }

    //修改用户封面图片
    function changeFace(){
        alert('修改封面');

    }

    //显示操作按钮
    function showOpBox(){
            let opBox = `<div class="op-box">
                <div class="edit" onclick="opEdit()">
                    <div></div>
                    <div><a href="javascript:void(0)" onclick="opEdit()">编辑</a></div>
                </div>
               <div class="delete" onclick="opDelete()">
                    <div></div>
                    <div><a href="javascript:void(0)" onclick="opDelete()">删除</a></div>
                </div>
    </div>`;
            $(".data-1x").append(opBox);
    }

    //删除操作按钮
    function deleteOpBox(){
        $(".data-1x .op-box").detach();
    }

    function toWorks(){
        window.location.href="works.php";
    }

    function opEdit(){
        alert('edit');
    }
    function opDelete(){
        alert('delete');
    }

    function toUser(){
        window.location.href="/index.php";
    }
</script>
</html>